import React, { Component } from 'react'
import { Button, Cell, Input, Toast } from 'react-vant';
import Mytaps from './components/mytaps';
import CTX from './ctx';
//收入支出 同一个组件
export default class Incomexpend extends Component {
  static contextType=CTX
  state={
    total:"",//金额
    ms:"",//描述 备注
    sList:['兼职','红包','奖金','工资','其他'],
    sIndex:0,
    zList:['话费','购物','吃喝','打车','其他'],
    zIndex:0,
    zhList:['红包','微信','支付宝','花呗','银行卡'],
    zhIndex:0
  }

  // 获取支出的索引
  setzIndex=(index)=>{
    this.setState({zIndex:index})
  }

  // 获取收入的索引
  setsIndex=(index)=>{
    this.setState({sIndex:index})
  }

  // 获取账户的索引
  setzhIndex=(index)=>{
    this.setState({zhIndex:index})
  }
  render() {
    let {type}=this.props.match.params
    let {total,ms,sList,sIndex,zList,zIndex,zhList,zhIndex}=this.state
    return (
      <div style={{padding:"15px",boxSizing:"border-box"}}>
        {/* 金额 */}
        <Cell title='请输入金额' label={<Input style={{border:"1px solid #ccc",borderRadius:"5px",padding:"10px", boxSizing:"border-box",fontSize:"20px"}} placeholder='请输入金额' value={total} onChange={(val)=>{
          this.setState({total:val*1})
        }}></Input>} />

        {/* 分类 */}
        <Cell title='分类' label={type==1?<Mytaps data={zList} dataIndex={zIndex} setIndex={this.setzIndex}></Mytaps>:<Mytaps data={sList} dataIndex={sIndex} setIndex={this.setsIndex}></Mytaps>} />

        {/* 账户 */}
        <Cell title='请选择账户' label={<Mytaps data={zhList} dataIndex={zhIndex} setIndex={this.setzhIndex}></Mytaps>} />

        {/* 备注 */}
        <Cell title='请输入备注' label={<Input.TextArea style={{border:"1px solid #ccc",borderRadius:"5px",padding:"10px", boxSizing:"border-box",fontSize:"16px"}} placeholder='请输入备注' value={ms} onChange={(val)=>{
          this.setState({ms:val})
        }}></Input.TextArea>} />
        <Button type="primary" block onClick={()=>{
          if(!total){
            Toast.fail('金额不能为空')
          }
          if(!ms){
            Toast.fail('备注不能为空')
          }
          // 标题
          let title=type==1?zList[zIndex]:sList[sIndex]
          let obj={
            id:new Date().getTime(),
            title,
            ms,
            total,
            sed:false,
            type
          }
          console.log(obj);
          
          this.context.add(obj)
          this.props.history.push("/")
          
        }} >完成</Button>
      </div>
    )
  }
}
